//查询产品
<template>
    <div class="product">
        <div style="height: 80px">
            <div>
                <el-autocomplete style="margin-top: 20px;margin-left: -1040px"
                        class="inline-input"
                        v-model="select" hide-loading=true
                        placeholder="请输入名称关键字">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-autocomplete> <el-button  @click="getSelect()" icon="el-icon-search" circle></el-button>
            </div>
            <div style="height:40px;margin-top: -40px">
               <el-button style="margin-right: -1000px;" @click="addProduct()" type="primary" round>添加产品</el-button></div>
        </div>
        <el-table :data="pagination.records" border :header-cell-style="{background : 'rgba(72,121,129,0.38)'}"  :cell-style="cellStyle">
            <el-table-column align="center" fixed="left" prop="productName" label="名称" width="250"></el-table-column>
            <el-table-column align="center" prop="productTitle" label="标题" width="200"></el-table-column>
            <el-table-column align="center" prop="productPrice" label="原价" width="80"></el-table-column>
            <el-table-column align="center" prop="productSalePrice" label="促销价" width="80"></el-table-column>
            <el-table-column align="center" prop="productCategory.categoryName" label="分类" width="130"></el-table-column>
            <el-table-column align="center" prop="productIsEnabled" label="上架状态" width="100" ></el-table-column>
            <el-table-column align="center" prop="productCreateDate" label="创建时间" width="200"></el-table-column>
            <!--要进行的操作-->
            <el-table-column  fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="view(scope.row.productId)" type="info" icon="el-icon-view" size="small"
                               round></el-button><!--详情查看-->
                    <el-button @click="edit(scope.row.productId)" type="info" icon="el-icon-edit" size="small"
                               round></el-button><!--详情修改-->
                    <el-button @click="deleteRecord(scope.row.productId)" type="danger" icon="el-icon-delete"
                               size="small" round></el-button><!--删除-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current"
                :page-sizes="[7, 10, 15, 20]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" class="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: 'product',
        data() {
            return {
                select:'',//搜索框
                form: {
                    productCategory: {}
                }, //保存点击以后当前产品的信息
                pagination: { //分页后的产品信息
                    current: 1, //当前页
                    total: null, //记录条数
                    size: 7,//每页条数
                    records: []  //当前页面的数据
                },
                dialogVisible: false  //如果为true就显示编辑框
            }
        },
        created() {
            this.getProductInfo()
        },
        methods: {
         edit(productId){   //查看详情
             this.$router.push({name:'ProductDetail',params:{productId:productId}})
         },
         addProduct(){
             this.$router.push({name: 'AddProduct'})
          },
          view(productId){
              this.$router.push({name:'ProductDetail',params:{productId:productId,flag:'view'}})
          },
          getSelect(){
             this.$axios.get(`/api/productByName/${this.select}/${this.pagination.current}/${this.pagination.size}`).then(res =>{
                 if (res.data != null && res.data != ''){
                     this.pagination = res.data
                 }else {
                     this.$confirm('未查找到相关数据','查询提示',{
                         confirmButtonText: '好吧',
                         type : "warning"
                     }).then(() => {
                     })
                 }
             })
    },
            /*
         * row为某一行的除操作外的全部数据
         * column为某一列的属性
         * rowIndex为某一行（从0开始数起）
         * columnIndex为某一列（从0开始数起）
         */
            cellStyle ({ row, column, rowIndex, columnIndex }) {
                // 状态列字体颜色
                if (row.status == '销售中--' && columnIndex == 5) {
                    return 'color: #0CB618'
                } else if (row.status == '已停售！！' && columnIndex == 5) {
                    return 'color: #EA1B29'
                } else {
                    return 'color: #1a1a1b'
                }
            },

            handleClose(done) { //关闭提醒
                this.$confirm('确认关闭?')
                    .then(_ => {
                        done();
                    }).catch(_ => {
                });
            },
            submit() { //提交修改后的产品信息
                this.dialogVisible = false
                this.$axios({
                    url: '/api/product',
                    method: 'put',
                    data: {
                        ...this.form
                    }
                }).then(res => {
                    console.log("更新成功",res)
                    if (res.data ==1) {          //只有data返回1时成功
                        this.$message({ //成功修改提示
                            showClose: true,  //设置手动关闭
                            center: true ,//内容居中
                            message: '更新成功',
                            type: 'success'
                        })
                    }else {               //失败
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "更新失败！",
                            center: true //内容居中
                        });
                    }
                    this.getProductInfo() //更新页面数据！！！！
                }).catch(res =>{                           //服务器报错
                    this.$message({   //弹出错误框
                        showClose: true,
                        type: "error",
                        message: "更新失败！",
                        center: true //内容居中
                    });
                })
            },
            deleteRecord(productId) {
                this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '算了,留着',
                    type: 'danger'
                }).then(() => { //确认删除
                    this.$axios({
                        url: `/api/product/${productId}`,
                        method: 'delete',
                    }).then(res => {
                        if (res.data ==1) {          //只有data返回1时成功 //删除成功
                            this.getProductInfo()
                            this.$message({   //弹出成功框
                                showClose: true,
                                type: "success",
                                message: "删除成功",
                                center: true //内容居中
                            });
                        }else {
                            this.$message({   //弹出错误框
                                showClose: true,
                                type: "error",
                                message: "删除失败！",
                                center: true //内容居中
                            });
                        }
                    }).catch(res =>{                           //删除失败
                        console.log("删除报错",res)
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "删除失败！",
                            center: true //内容居中
                        });
                    })
                })
            },
            getProductInfo() { //分页查询所有产品信息
                this.$axios(`/api/product/${this.pagination.current}/${this.pagination.size}`).then(res => {
                    for (let i = 0; i < res.data.records.length; i++) {  //将代表销售状态的数字转化为对应的销售状态文字
                        switch (res.data.records[i].productIsEnabled) {
                            case 0 :
                                res.data.records[i].productIsEnabled='销售中--';
                                break;
                            case 1 :
                                res.data.records[i].productIsEnabled='已停售！！';
                                break;
                            case 2 :
                                res.data.records[i].productIsEnabled='促销中~~~';
                                break;
                        }
                    }
                    console.log("返回的对象", res)
                    this.pagination = res.data
                    console.log("返回的页面数据", this.pagination.records)

                }).catch(error => {
                })
            },
            //改变当前记录条数
            handleSizeChange(val) {
                this.pagination.size = val
                this.getProductInfo()
            },
            //改变当前页码，重新发送请求
            handleCurrentChange(val) {
                this.pagination.current = val
                this.getProductInfo()
            },
        },
    };
</script>
<style lang="scss" scoped>
    .product {                /*整体表格样式*/
        padding: 0px 40px;
    }

    .page {                 /*页码样式*/
        margin-top: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
